<template>
  <div>
    <div class="thead">标签列表
      <div class="addpar"
        @click="showAddTags()">
        <img class="add"
          src="../../images/main/add.png"
          alt> 新增标签
      </div>
    </div>
   <el-table
    :data="tagList"
    style="width: 100%">
    <el-table-column
    align="center"
      prop="name"
      label="标签内容"
      >
    </el-table-column>
    <el-table-column label="更新时间" align="center">
      <template slot-scope="scope">
        <div>{{setDate(scope.row.time)}}&nbsp;&nbsp;{{setTime(scope.row.time)}}</div>
      </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
           <el-popover placement="right" width="200" trigger="click">
              <div class="menu-list">
                <div v-if="roleList.search('标签设置') != '-1'" >
                <el-button type="primary" size="mini" round @click="editTags( scope.row.name, scope.row.id)">
                  编辑
                </el-button>
                </div>
                <div v-if="roleList.search('标签设置') != '-1'" >
                <el-button type="primary" size="mini" round @click="delTags( scope.row.id)">
                  删除
                </el-button>
                </div>
                </div>
              <div slot="reference" class="show-menu">···</div>
            </el-popover>
        </template>
      </el-table-column>
  </el-table>
    <div class="task" v-if="task">
<div class="bgc">
                <div class="box_tip">
                    <div class="tips">{{tagTitle}}</div>
                    <div class="btn_x">
                        <a class="x"  @click="closeTag()">×</a>
                    </div>
                    <hr>
                    <input class="text_input" type="text" placeholder="请输入标签" v-model="name">
                    <div class="btn_submit" type="submit" @click="saveTags()" >提交</div>
                
                </div>
            </div>
    </div>
    
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="params.page"
      layout="total, prev, pager, next, jumper"
      :total="pageTotal"
      style="text-align:center;margin:20px auto;">
    </el-pagination>
  </div>
</template>
<script>
import Global from "../tool/Global.vue";
import axios from "axios";
import qs from "qs";
export default {
  created () {
    this.getTagList();
    this.getRole()
  },
  data() {
    return {
      params: {
        page: 1,
        limit: 10
      },
      tagList: [],
      name: "",
      task: false,
      isEdit: false,
      tagTitle: "新增标签",
      tagId: "",
      pageTotal: 1,
      roleList:''
    };
  },
  methods: {
    tagInput(){
      this.name = this.name.replace(/(^\s*)|(\s*$)/g, "");
      if(this.name.length > 8){
        this.name = this.name.substring(0,8)
      }
    },
    /**
     *  获取权限
     */
    getRole: function () {

      let that = this;
      axios({
          method: 'post',
          url:`${that.$store.state.url}/sysPermission/selectByEmployeeId`,
            data:qs.stringify({
              empId:that.$cookie.get('pid')
            })
      }).then(res => {
            console.log(res)
            let arr = res.data.data
            let role = []
            for(let i = 0; i < arr.length; i++) {
              role.push(arr[i].name)
            }
            this.roleList = role.toString()
        });
    },
    handleCurrentChange( argv ) {
      this.params.page = argv;
    },
    /**
     * 显示标签
     */
    showAddTags: function() {
      this.task = true;
      this.isEdit = false;
      this.tagTitle = "新增标签";
      this.name = "";
      this.tagId = "";
    },
    /**
     * 关闭标签修改
     */
    closeTag: function() {
      this.task = false;
    },
    /**
     * 编辑标签
     */
    editTags: function(name, id) {
      this.name = name;
      this.isEdit = true;
      this.task = true;
      this.tagTitle = "编辑标签";
      this.id = id;
    },
    /**
     * 查询标签列表
     */
    getTagList: function() {
      axios({
        method: "post",
        url: `${this.$store.state.url}/tLabel/selectList`,
        data:qs.stringify(this.params)
      }).then(res => {
        if (res.data.code == 0) {
          this.pageTotal = Math.ceil ( res.data.count / 10 );
          this.tagList = res.data.data;
        } else {
          alert(res.msg);
        }
      });
    },
    /**
     * 删除标签
     */
    delTags: function(id) {
      let that = this;
      if (confirm("确认删除?")) {
        axios({
          method: "post",
          url: `${that.$store.state.url}/tLabel/delLabel`,
          data: qs.stringify({ id: id })
        }).then(res => {
          console.log(res);
          if (res.data.code == 0) {
            this.getTagList();
            let logData = {
                loginTime:this.$cookie.get("loginTime"),
                account:this.$cookie.get("userAccount"),
                content:'删除标签',
              operationTime:this.setDate(new Date()) + ' ' +this.setTime(new Date())
              }
              axios({
          method: "post",
          url: `${that.$store.state.url}/log/addLog`,
          data: qs.stringify(logData)
        }).then( (res) => {
          console.log(res,'222')
        })
          } else {
            alert(res.msg);
          }
        });
      }
    },
    /**
     * 保存标签
     */
    saveTags: function() {
      let that = this;
      let data = {
        name: that.name,
        id: that.id
      };

      let url = `${that.$store.state.url}/tLabel/addLabel`;
      if (that.isEdit) {
        url = `${that.$store.state.url}/tLabel/updateLabel`;
      }
      axios({
        method: "post",
        url: url,
        data: qs.stringify(data)
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          this.$store.state.fn.success( '保存成功' );
          that.getTagList();
          let logData = {
                loginTime:this.$cookie.get("loginTime"),
                account:this.$cookie.get("userAccount"),
                content:that.isEdit ? '修改标签' : '增加标签',
              operationTime:this.setDate(new Date()) + ' ' +this.setTime(new Date())
              }
              axios({
          method: "post",
          url: `${that.$store.state.url}/log/addLog`,
          data: qs.stringify(logData)
        }).then( (res) => {
          console.log(res,'222')
        })
          that.task = false;
        } else {
          this.$alert(res.data.msg);
        }
      });
    },
    /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth()+1 < 10 ? "0" + (times.getMonth() +1) : times.getMonth() + 1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
  }
};
</script>
<style scoped>
.thead {
  height: 40px;
  line-height: 40px;
  color: #778CA2;
  font-size: 14px;
}
.addpar {
  float: right;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  width: 114px;
  height: 32px;
  background: rgba(75, 116, 255, 1);
  border-radius: 24px;
  border: 1px solid rgba(75, 116, 255, 1);
  line-height: 32px;
  text-align: center;
}
.show-menu {
  color: rgba(75, 116, 255, 1);
  cursor: pointer;
}
.menu-list div {
  margin: 5px;
  float: left;
  box-sizing: border-box;
  width: 40%;
}
.box_tip{background:#ffffff;
    box-shadow:0 2px 9px 0 rgba(0,0,0,0.50);
    border-radius:8px;
    width:646px;
    height:399px;
    text-align:center;
    padding-top:21px;
    overflow:hidden;
    position: fixed;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    margin:auto;
    z-index:2000;}
    .tips{font-family:PingFangSC-Medium;
        font-size:20px;
        color:#000000;
        font-weight: bold;
        height: 35px;
        line-height: 35px;
        }
    .btn_x{background:#9b9b9b;
            width:86px;
            height:86px;
            border-radius:100%;
            position: absolute;
            right:-43px;
            top:-43px;
            }
        .x{font-size: 25px;
        text-decoration: none;
        position: absolute;
        left: 19px;
        bottom:15px;
        color: #fff;
        font-weight: bold;
        }
    hr{opacity:0.38;
        background-color: #979797;
        width:306px;
        height:2px;
        margin-top:8px;}
    .text_input{margin-top:103px;
        background:#ffffff;
        box-shadow:inset 0 1px 3px 0 rgba(0,0,0,0.50);
        width:311px;
        height:40px;
        text-align: center;
        font-size:18px;
color:#4a4a4a;}
    .btn_submit{display:block;
        margin:84px auto;
        background:#085dab;
        width:200px;
        height:45px;
        line-height: 45px;
        padding: 0px;
        margin-bottom: 0px;
        cursor: pointer;
        color: #ffffff;}

</style>

